<template>
  <div class="pagestyle">
    <list_controller ref="zujianname" :options="state.options" :noprintDownShow="true">
      <template v-slot:opraCurdBtnlist="row">
        <span>
          <el-button
            class="tableFontSize"
            type="primary"
            link
            size="small"
            @click="lookBtn(row.row.row)"
            >查看</el-button
          >
          <el-button
            class="tableFontSize"
            type="primary"
            link
            size="small"
            @click="editBtn(row.row.row)"
            >编辑</el-button
          >
          <el-button
            class="tableFontSize"
            type="primary"
            link
            size="small"
            @click="deleteBtn(1,row.row.row)"
            >删除
          </el-button>
        </span>
      </template>
      <template v-slot:opraCurdBtnAll>
        <span
          :class="state.addModal ? 'listInfoBtn active' : 'listInfoBtn'"
          @click="addBtn"
        >
          <svg-icon
            :class="state.addModal ? 'active' : ''"
            class-name="search-icon"
            icon-class="xinzeng"
          />
          新增
        </span>
        <span :class="'listInfoBtn'" @click="deleteBtn(0)">
          <svg-icon class-name="search-icon" icon-class="shanchu" />
          删除
        </span>
      </template>
      <template v-slot:selectNamelist> 抽采利用 </template>
    </list_controller>
    <!-- 新增弹窗 -->
    <teleport to="body">
      <vxe-modal esc-closable destroy-on-close :lock-view="false" :width="664" v-model="state.addModal"
        resize :mask="true" :before-hide-method="close" showFooter>
        <template #title>
          <div class="w100 h100 fsc mask_title">{{state.modalTitle}}</div>
        </template>
        <template #default>
          <div class="form_box">
            <el-form ref="formRef" :model="state.formData" :rules="state.rules" label-position="top">
              <el-row :gutter="20">
                <el-col :span="8">
                  <el-form-item label="泵站名称" prop="name">
                    <el-input style="width:200px;" clearable v-model="state.formData.name" placeholder="请输入"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="开始时间" prop="startTime">
                    <el-date-picker
                      v-model="state.formData.startTime"
                      type="datetime"
                      style="width:200px;"
                      value-format="YYYY-MM-DD HH:mm:ss"
                      format="YYYY-MM-DD HH:mm:ss"
                      placeholder="请选择"
                    />
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="抽放标况纯流量" prop="flow">
                    <el-select v-model="state.formData.flow" clearable placeholder="请选择" style="width: 200px">
                      <el-option
                        v-for="item in state.logicNames"
                        :key="item.gasDrainName"
                        :label="item.gasDrainName"
                        :value="item.gasDrainName"
                      />
                    </el-select>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row :gutter="20">
                <el-col :span="8">
                  <el-form-item label="抽放排空标况纯流量" prop="emptyFlow">
                    <el-select v-model="state.formData.emptyFlow" clearable placeholder="请选择" style="width: 200px">
                      <el-option
                        v-for="item in state.logicNames"
                        :key="item.gasDrainName"
                        :label="item.gasDrainName"
                        :value="item.gasDrainName"
                      />
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="抽放利用标况纯流量" prop="usageFlow">
                    <el-select v-model="state.formData.usageFlow" clearable placeholder="请选择" style="width: 200px">
                      <el-option
                        v-for="item in state.logicNames"
                        :key="item.gasDrainName"
                        :label="item.gasDrainName"
                        :value="item.gasDrainName"
                      />
                    </el-select>
                  </el-form-item>
                </el-col>
              </el-row>
            </el-form>
          </div>
        </template>
        <template #footer>
          <el-button @click="close">取消</el-button>
              <el-button type="primary" @click="sumbitClick">
                确定
              </el-button>
        </template>
      </vxe-modal>
    </teleport>
    <!-- 详情弹窗 -->
    <teleport to="body">
      <vxe-modal esc-closable destroy-on-close :lock-view="false" :width="664" v-model="state.open_detail"
        resize :mask="true" :before-hide-method="close" showFooter>
        <template #title>
          <div class="w100 h100 fsc mask_title">详情</div>
        </template>
        <template #default>
          <div class="form_box">
            <detailCom :descList="state.descList1"></detailCom>
          
          </div>
        </template>
        <template #footer>
          <div class="form_footer form_footer2">
              <el-button type="danger" plain @click="deleteBtn(1,state.formData)">删除</el-button>
              <el-button type="primary" @click="editBtn(state.formData)">
                编辑
              </el-button>
            </div>
        </template>
      </vxe-modal>
    </teleport>
  </div>
</template>
<script setup>
import list_controller from "@/components/commonCom/list_controller";
import { computed, onMounted, reactive } from "vue";
import { table_headers } from "@/components/commonCom/table_headers";
import axios from "@/utils/request";
import usePagesStore from "@/store/modules/pages";
import { ElMessage,ElMessageBox } from "element-plus";
import detailCom from '@/components/commonCom/detailCom';


const { proxy } = getCurrentInstance();
const store = usePagesStore();
const router = useRouter();
const upload = ref(null);
let state = reactive({
  options: {
    tableheads: computed(() => table_headers.gasPumpStation),
    queryList: {
      dropdownUrl: "",
      querys: [],
      queryMap: new Map([]),
    },
    dataUrl: "/pump/station/list",
  },
  modalTitle:'抽采利用新增',
  addModal:false,
  open_detail:false,
  formData:{},
  rules:{
    name: [{
      required: true,
      message: '请输入泵站名称',
      trigger: 'blur'
    }],
    startTime: [{
      required: true,
      message: '请选择开始时间',
      trigger: 'blur'
    }],
    flow: [{
      required: true,
      message: '请选择抽放标况纯流量',
      trigger: 'blur'
    }],
    emptyFlow: [{
      required: true,
      message: '请选择抽放排空标况纯流量',
      trigger: 'blur'
    }],
    usageFlow: [{
      required: true,
      message: '请选择抽放利用标况纯流量',
      trigger: 'blur'
    }],
  },
  descList1:[],
  logicNames:[],
});
// 获取逻辑对象名称
const getlogicName = () => {
  axios.post('/drain/calculation/list',{}).then(res => {
    state.logicNames = res.data.list
  })
}
// 获取数据详情
const getDataInfo = (obj) =>{
  axios.post('/pump/station/getById',{id:obj.id}).then(res => {
    state.formData = res.data
    if(state.open_detail){
      setData(state.formData)
    }
  })
}


// 打开新增弹窗
const addBtn = () => {
  state.addModal = true
  state.modalTitle = '抽采利用新增'
  getlogicName()
}
// 关闭弹窗时执行
const close = () =>{
  state.addModal = false
  state.formData = {}
}
// 提交
const sumbitClick = () =>{
  proxy.$refs["formRef"].validate(valid => {
    if (valid){
      if(state.modalTitle.includes('新增')){
        axios.post('/pump/station/add',state.formData).then(res => {
          if(res.code == 200){
            ElMessage.success(res.msg)
            close()
            proxy.$refs['zujianname'].getData()
          }
        })
      }else{
        axios.post('/pump/station/modify',state.formData).then(res => {
          if(res.code == 200){
            ElMessage.success(res.msg)
            close()
            proxy.$refs['zujianname'].getData()
          }
        })
      } 
    }
  })
}
// 打开删除弹窗
const deleteBtn = (n,obj) =>{
  if(n == 0){
    let ids = []
    if (store.records.length > 0) {
      ids = store.records.map(item => {
        return item.id
      })
    } else {
      ElMessage.warning('请先勾选所要删除数据!');
    }
    if(ids.length > 0){
      ElMessageBox.confirm(
        '是否确认删除?',
        {
          confirmButtonText: '确认',
          cancelButtonText: '取消',
          type: 'warning',
        }
      ).then(()=>{
        axios.post('/pump/station/del',ids).then(res => {
          if (res.code == 200) {
            proxy.$refs['zujianname'].getData()
            proxy.$modal.msgSuccess(res.msg);
            store.records = []
          }
        })
      })
    }
  }else{
    ElMessageBox.confirm(
        '是否确认删除?',
        {
          confirmButtonText: '确认',
          cancelButtonText: '取消',
          type: 'warning',
        }
      ).then(()=>{
        axios.post('/pump/station/del',[obj.id]).then(res => {
          if (res.code == 200) {
            proxy.$refs['zujianname'].getData()
            proxy.$modal.msgSuccess(res.msg);
            store.records = []
            state.open_detail = false
          }
        })
      })
  }
} 
// 打开编辑弹窗
const editBtn = (row) => {
  getDataInfo(row)
  getlogicName()
  state.addModal = true
  state.modalTitle = '抽采利用修改'
}
// 打开详情弹窗
const lookBtn = (row) => {
  getDataInfo(row)
  state.open_detail = true
}
// 处理详情传入数据
const setData = (obj) =>{
  state.descList1[0] = {
    name: "泵站名称",
    value: obj.name,
    col: 8
  }
  state.descList1[1] = {
    name: "开始时间",
    value: obj.startTime,
    col: 8
  }
  state.descList1[2] = {
    name: "抽放标况纯流量",
    value: obj.flow,
    col: 8
  }
  state.descList1[3] = {
    name: "抽放排空标况纯流量",
    value: obj.emptyFlow,
    col: 8
  }
  state.descList1[4] = {
    name: "抽放利用标况纯流量",
    value: obj.usageFlow,
    col: 8
  }
}

onMounted(()=>{

})
</script>
<style lang="scss" scoped>
.form_box{
  .title{
    height: 14px;
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    font-weight: 700;
    color: #3e464f;
    .colorarea{
      margin-right: 6px;
      width: 4px;
      height: 14px;
      background-color: #409eff;
    }
  }
  .label{
    height: 22px;
    display: flex;
    justify-content: space-between;
  }
  .item_box{
    height: 32px;
    display: flex;
    span{
      margin-left: 16px;
    }
  }
  .line_box{
    height: 16px;
  }
  .form_footer2{
    padding: 16px 0;
    display: flex;
    justify-content: space-between;
  }
}
</style>
